import produce from 'immer';
import React, { memo, useCallback, useEffect, useMemo, type FC } from 'react';
import styled from 'styled-components';
import { DefaultProps } from '../../types';
import { getAttributeValue } from '../../utils';
import style from './index.module.less';

export const TestCom: FC<DefaultProps> = memo(
  ({
    widget,
    widgetData,
    initCustomAttribute,
    initCustomEventList,
    initStaticDataOrigin,
    widgetRef,
    onWidgetUpdate,
    convertImageUrl = () => '',
  }) => {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const update = useCallback(() => {
      // 如有需要该方法可改变组件数据
      onWidgetUpdate(
        produce(widget, (draft: any) => {
          draft.config.dataOrigin.static = '';
        }),
      );
    }, [widget]);

    useEffect(() => {
      const verstion = widget.config.widgetVersion || '1.0.0';
      const config = require(`./version/${verstion}`).getConfig();

      // 初始化自定义属性和组件宽高
      initCustomAttribute(config, { width: 340, height: 250 });

      // 初始化自定义事件
      initCustomEventList([{ name: '菜单项点击', value: 'onClick' }]);

      //初始化静态数据
      initStaticDataOrigin({
        data: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
      });
    }, []);

    const { customAttribute } = widget.config;

    const fieldBgcolor = useMemo(
      () => getAttributeValue(customAttribute, 'bgcolor'),
      [customAttribute],
    );
    const fieldAlign = useMemo(
      () => getAttributeValue(customAttribute, 'align'),
      [customAttribute],
    );
    const fieldUsebgimage = useMemo(
      () => getAttributeValue(customAttribute, 'usebgimage'),
      [customAttribute],
    );
    const fieldBgimage = useMemo(
      () => convertImageUrl(getAttributeValue(customAttribute, 'bgimage')),
      [customAttribute],
    );

    const datas: string[] = useMemo(() => {
      const data = widgetData?.data;
      if (!Array.isArray(data)) {
        return ['null'];
      }
      return data.map((item) => '' + item);
    }, [widgetData]);
    const emitEvent = useCallback(
      (value: string) => {
        if (!widgetRef.current) return;
        widgetRef.current.customEvent('onClick', { value }); //触发组件自定义事件
      },
      [widget],
    );
    return (
      <Wrapper bgImage={fieldUsebgimage ? fieldBgimage : ''}>
        <FlexContent align={fieldAlign} childBg={fieldBgcolor}>
          {datas.map((value, index) => (
            <span
              className={style.item}
              key={index}
              onClick={() => emitEvent(value)}
            >
              {value}
            </span>
          ))}
        </FlexContent>
      </Wrapper>
    );
  },
);

TestCom.displayName = '我的组件'; //组件名称
export default TestCom;

const Wrapper = styled.div<{ bgImage: string }>`
  background-image: url(${(p) => p.bgImage});
  background-size: cover;
  width: 100%;
  height: 100%;
  overflow: auto;
  font-size: 16px;
  text-shadow: 1px 1px 3px red;
  color: #000;
`;
const FlexContent = styled.div<{ align: string; childBg: string }>`
  display: flex;
  flex-wrap: wrap;
  flex-direction: ${(p) => p.align};
  > span {
    background-color: ${(p) => p.childBg};
  }
`;
